<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
</head>

<body class="hold-transition skin-red sidebar-mini" >
<div id="app">
	<!-- 正文区域 -->
	<section class="content">
		<div class="box-body">
			<!--tab页-->
			<div class="nav-tabs-custom">
				<!--tab头-->
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#home" data-toggle="tab">商品基本信息</a>
					</li>
					<li >
						<a href="#pic_upload" data-toggle="tab">商品图片</a>
					</li>
					<li>
						<a href="#spec" data-toggle="tab" >规格</a>
					</li>
				</ul>
				<!--tab内容-->
				<div class="tab-content">
					<!--表单内容-->
					<div class="tab-pane active" id="home">
						<div class="row data-type">
							<div class="col-md-2 title">商品分类</div>
							<div class="col-md-10 data">
								<table>
									<tr>
										<td v-for="(itemFa, index) in categoryList" :key="index">
											<select class="form-control" @change="change($event, index)">
												<option value="-1" selected>请选择分类</option>
												<option v-for="(itemSon, index1) in itemFa" :key="itemSon.id" :value="itemSon.id" :ref="'category' + index1">{{ itemSon.name }}</option>
											</select>
										</td>
										<td v-show="curModelId">
											模板ID:{{ curModelId }}
										</td>
									</tr>
								</table>
							</div>
							<div class="col-md-2 title">商品名称</div>
							<div class="col-md-10 data">
								<input type="text" class="form-control" v-model="goodEntity.goods.goodsName" placeholder="商品名称" value="">
							</div>
							<div class="col-md-2 title">品牌</div>
							<div class="col-md-10 data">
								<select class="form-control" @change="select">
									<option value="-1">请选择对应的品牌</option>
									<option v-for="item in brandList" :selected="goodEntity.goods.brandId === item.id" :key="item.id" :value="item.id">{{ item.name }}</option>
								</select>
							</div>

							<div class="col-md-2 title">副标题</div>
							<div class="col-md-10 data">
								<input type="text" class="form-control" v-model="goodEntity.goods.caption" placeholder="副标题" value="">
							</div>

							<div class="col-md-2 title">价格</div>
							<div class="col-md-10 data">
								<div class="input-group">
									<span class="input-group-addon">¥</span>
									<input type="text" class="form-control" v-model="goodEntity.goods.price" placeholder="价格" value="">
								</div>
							</div>

							<div class="col-md-2 title editer">商品介绍</div>
							<div class="col-md-10 data editer">
								<div id="container" style="width: 100%; height: 400px"></div>
								<!--富文本编辑器内容-->
							</div>

							<div class="col-md-2 title rowHeight2x">包装列表</div>
							<div class="col-md-10 data rowHeight2x">
								<textarea rows="4"  class="form-control" v-model="goodEntity.goodsDesc.packageList" placeholder="包装列表"></textarea>
							</div>

							<div class="col-md-2 title rowHeight2x">售后服务</div>
							<div class="col-md-10 data rowHeight2x">
								<textarea rows="4"  class="form-control" v-model="goodEntity.goodsDesc.saleService" placeholder="售后服务"></textarea>
							</div>

						</div>
					</div>
					<!--图片上传-->
					<div class="tab-pane" id="pic_upload">
						<div class="row data-type">
							<!-- 颜色图片 -->
							<div class="btn-group">
								<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
							</div>
							<table class="table table-bordered table-striped table-hover dataTable">
								<thead>
								<tr>
									<th class="sorting">颜色</th>
									<th class="sorting">图片</th>
									<th class="sorting">操作</th>
								</tr>
								</thead>
								<tbody>
								<tr v-for="(item, index) in savedImages" :key="item.id">
									<td>{{ item.color }}</td>
									<td>
										<img alt="" :src="item.url" width="100px" height="100px">
									</td>
									<td>
										<button type="button" class="btn btn-default" title="删除" @click="deleteImage(index)"><i class="fa fa-trash-o"></i> 删除</button>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
					<!--规格-->
					<div class="tab-pane" id="spec">
						<div class="row data-type">
							<div class="col-md-2 title">禁用规格</div>
							<div class="col-md-10 data">
								<input type="checkbox" @click="isAbleSpec">
							</div>
						</div>
						<div v-show="goodEntity.goods.isEnableSpec">
							<div class="row data-type">
								<div v-for="(item, index) in specAndSpecOption" :key="item.id">
									<div class="col-md-2 title">{{ item.specName }}</div>
									<div class="col-md-10 data">
										<span  v-for="(item1, index1) in item.specificationOptions" :key="item1.id">
										<input  type="checkbox" :checked="isChecked(item.specName, item1.id)" @click="check($event, item, item1)">{{ item1.optionName }}
									</span>
									</div>
								</div>
							</div>
							<div class="row data-type">
								<table class="table table-bordered table-striped table-hover dataTable">
									<thead>
									<tr>
										<th class="sorting" v-for="item in selectedSpecAndSpecOption" :key="item.key">{{ item.specName }}</th>
										<th class="sorting">价格</th>
										<th class="sorting">库存</th>
<!--										<th class="sorting">是否禁用</th>-->
<!--										<th class="sorting">是否默认</th>-->
									</tr>
									</thead>
									<tbody>
									<tr v-for="(item, index) in rowList" :key="index">
										<td v-for="(item1, key) in item.spec" :key="key">
											{{ item1 }}
										</td>
										<td><input class="form-control" v-model="item.price"  placeholder="价格"></td>
										<td><input class="form-control" v-model="item.num" placeholder="库存数量"></td>
<!--										<td><input type="checkbox"></td>-->
<!--										<td><input type="checkbox"></td>-->
									</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="btn-toolbar list-toolbar">
			<button class="btn btn-primary" @click="saveGood">
				<i class="fa fa-save"></i>保存
			</button>
			<button class="btn btn-default" >返回列表</button>
		</div>
	</section>
	<!-- 上传窗口 -->
	<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" >
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="myModalLabel">上传商品图片</h3>
				</div>
				<div class="modal-body">
					<table class="table table-bordered table-striped">
						<tr>
							<td>颜色</td>
							<td><input class="form-control" placeholder="颜色" v-model="goodsImages.color"></td>
						</tr>
						<tr>
							<td>图片</td>
							<td>
								<table>
									<tr>
										<td>
											<input type="file" id="file" ref="file"/>
											<button class="btn btn-primary" type="button" @click="uploadImage" style="margin-top: 10px;">上传</button>
										</td>
										<td>
											<img v-show="goodsImages.url" :src="goodsImages.url"  width="200px" height="200px" />
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</div>
				<div class="modal-footer">
					<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" @click="saveImage">保存</button>
					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script src="../plugins/vue/vuejs-2.5.16.js"></script>
<script src="../plugins/vue/qs.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>
<script src="../api/network.js"></script>
<script src="../api/addGoods.js"></script>
<script charset="utf-8" src="../plugins/umedit/ueditor.config.js"></script>
<script charset="utf-8" src="../plugins/umedit/ueditor.all.min.js"></script>
<script charset="utf-8" src="../plugins/umedit/lang/zh-cn/zh-cn.js"></script>
<script src="../js/addGoodsManager.js"></script>
</html>